<template>
  <a-spin :spinning="spinning">
    <template v-if="form?.examResultShowtype == 1">
      <div class="result-box">
        <h2>{{ form.examTitle }}</h2>
        <div class="score">
          {{ form.userScore }} <span>分</span>
        </div>
        <div style="font-size: 16px"> 感谢您的作答！</div>
        <div style="color: rgb(255, 128, 0); font-weight: 700;font-size: 16px"
             v-if="form?.state == 1"> 该试卷还有主观题，主观题分数将在阅卷后累计到总成绩，请知晓！
        </div>
        <p>
          <a-button type="primary" :icon="h(CaretLeftOutlined)" @click="router.push('/exam')">
            返回考试页
          </a-button>
        </p>
      </div>
    </template>
    <template v-else-if="form?.examResultShowtype == 2">
      <template
        v-if="form?.showDeadline >0  && form?.state == 2 && diffDays(new Date(form?.previewTime
            ??form?.commitTime),new Date()) > form.showDeadline">
        <div class="result-box">
          <div class="score">
            {{ form.userScore }} <span>分</span>
          </div>
          <div style="font-size: 16px"> 感谢您的作答！</div>
          <p>
            <a-button type="primary" :icon="h(CaretLeftOutlined)" @click="router.push('/exam')">
              返回考试页
            </a-button>
          </p>
        </div>
      </template>
      <template v-else>
        <div class="fix">
          <div class="all-box-left">
            <div class="a-card is-always-shadow left-box left-box-normal">
              <a-card>
                <div class="score-card">
                  <div class="score-box">
                    <div>考试名称：{{ form.examTitle }}</div>
                    <div>考生姓名：{{ form.realName }}</div>
                    <div>考生得分：<span class="numberClass">{{ form.userScore }} 分</span></div>
                    <div>试卷总分：<span class="numberClass">{{ form.totalScore }} 分</span></div>
                    <div>及格分数：<span class="numberClass">{{ form.qualifyScore }} 分</span></div>
                    <div>考试结果：
                      <template v-if="form.state == 1">
                        <span style="color: sandybrown">待阅卷</span>
                      </template>
                      <template v-else>
                        <span v-if="form.passed == 1 " style="color: #00bb00"> 通过</span>
                        <span v-else style="color: red"> 未通过</span>
                      </template>
                    </div>
                  </div>
                </div>
              </a-card>
              <a-card>
                <a-row :gutter="8" style="font-size: 12px;margin-bottom: 20px">
                  <a-col :span="3">
                    <div class="tip">
                      <div class="info"></div>
                    </div>
                  </a-col>
                  <a-col :span="4">
                    待阅
                  </a-col>
                  <a-col :span="3">
                    <div class="tip">
                      <div class="success"></div>
                    </div>
                  </a-col>
                  <a-col :span="4">
                    答对
                  </a-col>
                  <a-col :span="3">
                    <div class="tip">
                      <div class="error"></div>
                    </div>
                  </a-col>
                  <a-col :span="4">
                    答错
                  </a-col>
                </a-row>
                <div class="group-card" v-for="(item,index) in form.answerCardList" :key="index">
                  <template v-for="(mapItem,key) in item" :key="key">
                    <a :href="'#anchor'+mapItem.indexList[0]" class="typeClass" :title="key">{{
                        key
                      }}</a>
                    <a-divider />
                    <div class="group-card-body">
                      共 <span class="numberClass">{{ mapItem.questionCount }}</span> 题，共 <span
                      class="numberClass">{{ mapItem.questionScore }}</span> 分
                    </div>
                    <div class="card-box">
                      <Anchor :affix="false">
                        <div class="item" v-for="(numItem,index1) in mapItem.indexList"
                             :key="index1">
                          <AnchorLink :href="'#anchor'+numItem" :class="cardItemClass(numItem)"
                                      :title="numItem"></AnchorLink>
                        </div>
                      </Anchor>
                    </div>
                  </template>
                </div>
              </a-card>
            </div>
          </div>
        </div>
        <div class="all-box-center">
          <div v-for="(userExamQuestion,index1) in form.userExamQuestionList" :key="index1">
            <div class="a-card content-card is-always-shadow">
              <a-card v-if="userExamQuestion.question">
                <div class="qu-box" :id="'anchor'+ userExamQuestion.questionIndex">
                  <div class="qu-item">
                    <div class="num">
                      {{ userExamQuestion.questionIndex }}
                    </div>
                    <div class="content flex">
                      <span v-html="userExamQuestion.question.content"></span>
                      <span class="scoreStyle">({{ userExamQuestion.questionScore }}分)</span>
                    </div>
                  </div>
                  <template v-if="userExamQuestion.questionType != 6">
                    <div v-if="userExamQuestion.questionType == 4">
                      <Tinymce v-model="userExamQuestion.answer" :disabled="true" />
                    </div>
                    <div class="qu-answer" v-else>
                      <div class="item"
                           v-for="(answerItem,index2) in userExamQuestion.question.answerList"
                           :key="index2">
                        <div class="tag">{{ answerItem.tag }}</div>
                        <div class="content">
                          {{ answerItem.content }}
                          <a-tag color="success"
                                 v-if="userExamQuestion.questionType!=5 && answerItem.isRight"
                                 :style="{float:'right'}">
                            <template #icon>
                              <check-circle-outlined />
                            </template>
                          </a-tag>
                        </div>
                      </div>
                    </div>
                    <div class="as-box">
                      <div>
                        <div class="right-line">
                          <template v-if="userExamQuestion.isRight!=null">
                            <template v-if="userExamQuestion.isRight">
                              <a-alert message="部分答对了" type="warning" show-icon
                                       v-if="userExamQuestion.actualScore < userExamQuestion.questionScore" />
                              <a-alert message="答对了" type="success" show-icon v-else />
                            </template>
                            <a-alert message="答错了" type="error" show-icon v-else />
                          </template>
                        </div>
                      </div>
                      <div>考生得分：{{ userExamQuestion.actualScore }}</div>
                      <div v-if="userExamQuestion.questionType < 4">
                        <div>考生答案：{{ userExamQuestion.answer }}</div>
                      </div>
                      <div v-else-if="userExamQuestion.questionType == 5">
                        <div v-if="userExamQuestion.question.answerList.length>1">
                          备注：
                          <span v-if="userExamQuestion.canBlankOption">按空给分，</span>
                          <span v-else>全部空答对给分，</span>
                          <span v-if="userExamQuestion.question.answerOrder">答案有序</span>
                          <span v-else>答案无序</span>
                        </div>
                      </div>
                      <div>难易程度：{{
                          userExamQuestion.question.level == 1 ? "简单" : userExamQuestion.question.level == 2 ? "一般" : "较难"
                        }}
                      </div>
                      <template
                        v-if="userExamQuestion.question.analysis && userExamQuestion.question.analysis.length>0">
                        <div>试题解析：</div>
                        <span v-html="userExamQuestion.question.analysis"></span>
                      </template>
                    </div>
                  </template>
                  <!--组合题-->
                  <div class="qu-answer" v-else>
                    <div class="combinaClass">
                      本大题共{{ userExamQuestion?.subQuestionList?.length || 0
                      }}小题，共得分{{ userExamQuestion.actualScore || 0 }}分
                    </div>
                    <div v-for="(subQuestion,subQuestionIndex) in userExamQuestion.subQuestionList"
                         :key="subQuestionIndex">
                      <a-card>
                        <div class="qu-item">
                          <div>
                            （{{ subQuestion.questionIndex }}）<span
                            style="color: #448efc;">【{{ subQuestion.questionTypeName }}】</span>
                          </div>
                          <div class="content flex">
                            <span v-html="subQuestion.question.content"></span>
                            <span class="scoreStyle">({{ subQuestion.questionScore }}分)</span>
                          </div>
                        </div>
                        <div v-if="subQuestion.questionType == 4">
                          <Tinymce v-model="subQuestion.answer" :disabled="true" />
                        </div>
                        <div class="qu-answer">
                          <div class="item"
                               v-for="(subQuestionAnswer,subQuestionAnswerIndex) in subQuestion.question.answerList"
                               :key="subQuestionAnswerIndex">
                            <div class="tag">{{ subQuestionAnswer.tag }}</div>
                            <div class="content">
                              {{ subQuestionAnswer.content }}
                              <a-tag color="success"
                                     v-if="subQuestion.questionType!=5 && subQuestionAnswer.isRight"
                                     :style="{float:'right'}">
                                <template #icon>
                                  <check-circle-outlined />
                                </template>
                              </a-tag>
                            </div>
                          </div>
                        </div>
                        <div class="as-box">
                          <div>
                            <div class="right-line">
                              <template v-if="subQuestion.isRight!=null">
                                <template v-if="subQuestion.isRight">
                                  <a-alert message="部分答对了" type="warning" show-icon
                                           v-if="subQuestion.actualScore < subQuestion.questionScore" />
                                  <a-alert message="答对了" type="success" show-icon v-else />
                                </template>
                                <a-alert message="答错了" type="error" show-icon v-else />
                              </template>
                            </div>
                          </div>
                          <div>考生得分：{{ subQuestion.actualScore }}</div>
                          <div v-if="subQuestion.questionType < 4">
                            <div>考生答案：{{ subQuestion.answer }}</div>
                          </div>
                          <div v-else-if="subQuestion.questionType == 5">
                            <div v-if="subQuestion.question.answerList.length>1">
                              备注：
                              <span v-if="subQuestion.canBlankOption">按空给分，</span>
                              <span v-else>全部空答对给分，</span>
                              <span v-if="subQuestion.question.answerOrder">答案有序</span>
                              <span v-else>答案无序</span>
                            </div>
                          </div>
                          <div>难易程度：{{
                              subQuestion.question.level == 1 ? "简单" : subQuestion.question.level == 2 ? "一般" : "较难"
                            }}
                          </div>
                          <template
                            v-if="subQuestion.question.analysis && subQuestion.question.analysis.length>0">
                            <div>试题解析：</div>
                            <span v-html="subQuestion.question.analysis"></span>
                          </template>
                        </div>
                      </a-card>
                    </div>
                  </div>
                </div>
              </a-card>
            </div>
          </div>
          <p>
            <a-button type="primary" :icon="h(CaretLeftOutlined)" @click="router.push('/exam')">
              返回考试页
            </a-button>
          </p>
          <a-back-top />
        </div>
      </template>
    </template>
  </a-spin>
</template>

<script lang="ts" setup>
import { h, ref } from "vue";
import { apiUserExamResultDetail } from "@/api/exam";
import { Anchor, AnchorLink } from "ant-design-vue";
import { CaretLeftOutlined, CheckCircleOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { Tinymce } from "@/components/public/Tinymce";
import { diffDays } from "@/utils/dateUtil";
import router from "@/router";

const spinning = ref<boolean>(false);

const route = useRoute();
const userExamId = route.params?.id ?? -1;
const form: any = ref<any>({
  userExamQuestionList: []
});

initFormData();

async function initFormData() {
  try {
    spinning.value = true;
    const data: any = await apiUserExamResultDetail(userExamId);
    form.value = { ...data.result };
  } finally {
    spinning.value = false;
  }
}

// 答题卡样式
function cardItemClass(index) {
  const tmpList: any = form.value.userExamQuestionList.filter((val: any) => val.questionIndex == index);
  if (tmpList && tmpList.length > 0) {
    if (tmpList[0].isRight != null) {
      if (tmpList[0].isRight) {
        return "num success";
      } else {
        return "num error";
      }
    } else {
      return "num info";
    }
  }
}
</script>

<style scoped>
.all-box {
  display: flex;
  flex-direction: row;
}

.all-box-left {
  width: 285px;
  flex: 0 0 285px;
}

.left-box-normal {
}

.left-box {
  height: calc(100vh - 30px);
  position: fixed;
  overflow: auto;
  clear: both;
  width: 285px;
}

.a-card.is-always-shadow {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.a-card {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #FFFFFF;
  color: #303133;
  transition: 0.3s;
}

.ant-card-bordered {
  border: none;
}

>>> .ant-card-body {
  padding: 20px 20px 0px 20px;
}

.group-card {
  margin-bottom: 15px;
  line-height: 28px;
  width: 100%;
}

.typeClass {
  font-size: 14px;
  font-weight: 700;
}

.group-card-body {
  line-height: 22px;
  font-size: 14px;
}

.numberClass {
  color: #448efc;
  font-style: italic;
}

.card-box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-left: -5px;
  margin-top: 10px;
}

.card-box .item {
  width: 30px;
  height: 35px;
  background: #eee;
  border-radius: 2px;
  font-size: 12px;
  -webkit-box-align: center;
  align-items: center;
  cursor: pointer;
  margin: 5px 5px 10px 5px;
  float: left;
}

.card-box .item .num {
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

.card-box .item .success {
  border-radius: 2px;
  background: #00bb00;
  color: #fff !important;
}

.card-box .item .info {
  border-radius: 2px;
  background: #1890ff;
  color: #fff !important;
}

.card-box .item .error {
  border-radius: 2px;
  background: red;
  color: #fff !important;
}

.ant-divider-horizontal {
  margin: 5px 0;
  width: 100%;
}

.ant-divider {
  background-color: #DCDFE6;
  position: relative;
}

.all-box-center {
  margin-left: 300px;
  padding: 20px;
}

.content-card {
  margin-bottom: 20px;
  line-height: 28px;
}

.a-card.is-always-shadow {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}


.qu-box {
  /*margin-bottom: 20px;*/
}

.qu-item {
  display: flex;
  margin-bottom: 20px;
}

.qu-item > .num {
  display: inline-block;
  background: url("../../assets/img/pick.png") no-repeat 100% 100%;
  background-size: contain;
  height: 35px;
  width: 35px;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.qu-item > .content {
  -webkit-box-flex: 1;
  flex-grow: 1;
  -webkit-box-align: start;
  align-items: flex-start;
}

.qu-answer > .item {
  display: flex;
  border: #eee 1px solid;
  border-radius: 5px;
  line-height: 20px;
  margin: 15px 0px 15px 0px;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.qu-answer > .item > .tag {
  width: 10px;
  font-weight: 700;
  color: #0a84ff;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.qu-answer > .item > .content {
  -webkit-box-flex: 1;
  flex-grow: 1;
  padding-left: 10px;
}

.qu-answer > .item > .right {
  width: 50px;
  flex-shrink: 0;
}

.score-box {
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  background: #f5f5f5;
  padding: 10px;
}

.score-card {
  line-height: 28px;
  width: 100%;
}

.as-box {
  border: #eee 1px solid;
  border-radius: 5px;
  line-height: 24px;
  margin: 5px 0px 10px 0px;
  padding: 10px;
  font-size: 14px;
  color: #555;
  background: #fcfcfc;
}

.right-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

.right-line .right {
  color: #03DD6D;
  font-size: 22px;
  margin-right: 10px;
}

.fix {
  position: fixed;
  width: 285px;
  left: 20px;
  top: 20px;
  background: #fff;
}

:deep(.ant-anchor-link-title) {
  color: #fff !important;
}

:deep(.ant-anchor-ink) {
  background-color: #fff !important;
}

.result-box {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  line-height: 50px;
  min-height: 50vh;
  justify-content: center;
}

.result-box .score {
  font-size: 60px;
  font-weight: 700;
  color: #0a84ff;
}

.result-box .score span {
  font-size: 20px;
}

.tip .info {
  border-radius: 2px;
  background: #1890ff;
  color: #fff !important;
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

.tip .error {
  border-radius: 2px;
  background: red;
  color: #fff !important;
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

.tip .success {
  border-radius: 2px;
  background: #00bb00;
  color: #fff !important;
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

:deep(span.xe-blanknumber) {
  min-width: 4em;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border-bottom: black solid 1px;
}

.scoreStyle {
  margin-left: 5px;
  color: #0a8fe9;
}

.flex {
  display: flex;
}

.combinaClass {
  font-weight: 700;
  color: red;
  margin-left: 20px
}
</style>
